<template>
  <div class="data-source">
    <el-card class="box-card">
      <!--筛选条件-->
      <el-form :inline="true" :model="searchForm" ref="searchForm" class="demo-form-inline">
        <el-form-item label="数据源" prop="name">
          <el-input v-model="searchForm.name" placeholder="数据源"></el-input>
        </el-form-item>
        <el-form-item label="数据库类型" prop="dbType">
          <el-select v-model="searchForm.dbType" placeholder="数据库类型">
            <el-option label="MySQL" value="MySQL"></el-option>
            <el-option label="Oracle" value="Oracle"></el-option>
            <el-option label="SQLServer" value="SQLServer"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchSubmit">查询</el-button>
          <el-button @click="searchReset">重置</el-button>
        </el-form-item>
      </el-form>

      <!--表格操作-->
      <el-row style="text-align: left;margin-bottom: 5px;">
        <el-button type="primary" size="mini" icon="el-icon-document-add" @click="openAddDialog">新增
        </el-button>
        <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataSource">删除</el-button>
      </el-row>

      <!--表格-->
      <template>
        <el-table
            :data="tableData"
            border
            style="width: 100%;min-height: 400px;"
            @selection-change="tableSelectionChange">
          <el-table-column
              align="center"
              type="selection"
              width="40">
          </el-table-column>
          <el-table-column
              align="center"
              type="index"
              label="序号">
          </el-table-column>
          <el-table-column
              align="center"
              prop="name"
              label="数据源">
          </el-table-column>
          <el-table-column
              align="center"
              prop="dbType"
              label="数据库类型">
          </el-table-column>
          <el-table-column
              align="center"
              prop="url"
              label="url"
              :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
              align="center"
              prop="username"
              label="用户名">
          </el-table-column>
          <el-table-column
              align="center"
              label="密码">****
          </el-table-column>
          <el-table-column
              align="center"
              prop="remarks"
              label="备注">
          </el-table-column>
          <el-table-column
              align="center"
              prop="createTime"
              label="创建时间">
          </el-table-column>
          <el-table-column
              align="center"
              label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="connectDataSource(scope.row)">连接</el-button>
              <el-button type="text" @click="openUpdateDialog(scope.row)">编辑</el-button>
              <el-button type="text" style="color: #f13636" @click="removeDataSource(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!--分页-->
      <div class="block">
        <el-pagination
            align="right"
            @size-change="pageSizeChange"
            @current-change="pageCurrentChange"
            :current-page="page.pageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
        </el-pagination>
      </div>
    </el-card>

    <!--新增或者编辑-->
    <el-dialog :title="dataTitle" :visible.sync="dataFormVisible" width="500px" :before-close="cancelDataSource">
      <el-form :model="dataForm" :rules="dataRules" ref="dataForm" label-width="100px">
        <el-form-item label="id" prop="id" hidden>
          <el-input v-model="dataForm.id"></el-input>
        </el-form-item>
        <el-form-item label="数据源名称" prop="name" required>
          <el-input v-model="dataForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据库类型" prop="dbType" required>
          <el-select v-model="dataForm.dbType" style="width: 360px;">
            <el-option label="MySQL" value="MySQL"></el-option>
            <el-option label="Oracle" value="Oracle"></el-option>
            <el-option label="SQLServer" value="SQLServer"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="url" prop="url" required>
          <el-input v-model="dataForm.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="username" required>
          <el-input v-model="dataForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" required>
          <el-input v-model="dataForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input type="textarea" v-model="dataForm.remarks" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveDataSource">确 定</el-button>
        <el-button @click="cancelDataSource">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {connection, listDataSource, removeDataSource, saveDataSource, updateDataSource} from "@/api/datasource";
import {Message, MessageBox} from "element-ui";

export default {
  name: 'dataSource',
  components: {},
  data() {
    return {
      searchForm: {
        name: '',
        dbType: ''
      },
      selectRowIds: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      tableData: [],
      dataFormVisible: false,
      dataTitle: '',
      // 表单参数
      dataForm: {},
      // 表单校验
      dataRules: {
        name: [
          {required: true, message: '请输入数据源名称', trigger: 'blur'},
          {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
        ],
        dbType: [
          {required: true, message: '请选择数据库类型', trigger: 'change'}
        ],
        url: [
          {required: true, message: '请输入url', trigger: 'blur'}
        ],
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
        remarks: [
          {required: false}
        ]
      }
    }
  },
  created() {
    this.listDataSource();
  },
  methods: {
    // 查询
    searchSubmit() {
      this.listDataSource();
    },
    // 重置
    searchReset() {
      this.$refs.searchForm.resetFields();
      this.listDataSource();
    },
    // 多选
    tableSelectionChange(val) {
      this.selectRowIds = [];
      for (let e of val) {
        this.selectRowIds.push(e.id);
      }
    },
    // 切换每页数量
    pageSizeChange(val) {
      this.page.pageSize = val;
      this.listDataSource();
    },
    // 切换页码
    pageCurrentChange(val) {
      this.page.pageNum = val;
      this.listDataSource();
    },
    // 查询数据
    listDataSource() {
      listDataSource({
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize,
        name: this.searchForm.name,
        dbType: this.searchForm.dbType
      }).then(response => {
            this.tableData = response.data.results;
            this.page.total = response.data.total;
          }
      );
    },
    // 新增弹窗
    openAddDialog() {
      this.dataFormVisible = true;
      this.dataTitle = '新增数据源';
    },
    // 编辑弹窗
    openUpdateDialog(row) {
      this.dataFormVisible = true;
      this.dataTitle = '编辑数据源';
      this.dataForm = Object.assign({}, row);
    },
    // 保存数据源
    saveDataSource() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          const id = this.dataForm.id;
          if (id != null) {
            updateDataSource(id, this.dataForm).then(() => {
              this.cancelDataSource();
              Message.success("修改成功");
              this.listDataSource();
            });
          } else {
            saveDataSource(this.dataForm).then(() => {
              this.cancelDataSource();
              Message.success("新增成功");
              this.listDataSource();
            });
          }
        } else {
          return false;
        }
      });
    },
    // 取消数据源
    cancelDataSource() {
      this.resetForm();
      this.dataFormVisible = false;
    },
    // 重置表单
    resetForm() {
      this.dataForm = {
        id: undefined,
        name: undefined,
        dbType: undefined,
        url: undefined,
        username: undefined,
        password: undefined,
        remarks: undefined
      };
      this.$refs.dataForm.resetFields();
    },
    // 删除数据源
    removeDataSource(row) {
      const ids = row.id || this.selectRowIds;
      MessageBox.confirm('是否确认删除所选数据', "系统提示", {
        type: "warning",
      }).then(() =>
          removeDataSource(ids).then(() => {
            Message.success("删除成功");
            this.listDataSource();
          })
      );
    },
    // 测试连接
    connectDataSource(row) {
      connection(row.id).then(() => {
        Message.success("连接成功");
      })
    }
  }
}
</script>

<style scoped>
.block {
  margin-top: 10px;
}
</style>
